<template>
    <div class="page animate__animated animate__fadeIn">
        <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '20px 20px 0' }">
            <el-form size="small" inline label-position="right">
                <!-- <el-form-item label="商品类型">
                    <el-select v-model="searchForm.goods_type" placeholder="请选择" clearable @clear="reload">
                        <el-option value="10" label="自营">自营</el-option>
                        <el-option value="20" label="供货商">供货商</el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="下单时间" prop="company_id">
                    <el-date-picker v-model="datePickerVal" value-format="yyyy-MM-dd" type="daterange"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="订单搜索" label-for="keyword">
                    <el-input v-model="searchForm.keyword" placeholder="请输入内容" clearable @clear="reload">
                        <el-select v-model="searchForm.search_type" slot="prepend" style="width: 100px">
                            <el-option value="0" label="全部"></el-option>
                            <el-option value="1" label="关键词"></el-option>
                            <el-option value="2" label="订单编号"></el-option>
                        </el-select>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="toSearch">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{ padding: '10px 15px' }">
            <el-tabs v-model="searchForm.status" @tab-click="handleClick">
                <el-tab-pane label="全部" name="0"></el-tab-pane>
                <el-tab-pane label="待配送" name="10"></el-tab-pane>
                <el-tab-pane label="配送中" name="20"></el-tab-pane>
                <el-tab-pane label="已完成" name="30"></el-tab-pane>
            </el-tabs>
            <ul class="table-header">
                <li class="flex2">商品信息</li>
                <li class="flex1">配送地址</li>
                <li class="flex1">订单总额</li>
                <li class="flex1">手续费</li>
                <li class="flex1">支付方式</li>
                <li class="flex1">操作</li>
            </ul>
            <div class="table-body" v-loading="isLoading">
                <template v-if="list.length > 0">
                    <div class="table-body-item" v-for="(item, index) in list" :key="index">
                        <section class="table-body-item-top">
                            <div class="table-order">
                                <div style="display: flex;align-items: center">
                                    <el-tag size="small" effect="plain" type="success"
                                        v-if="item.orderM.platform == 1">小程序</el-tag>
                                    <el-tag size="small" effect="plain" v-if="item.orderM.platform == 2">PC</el-tag>
                                    <el-tag size="small" effect="plain" type="warning"
                                        v-if="item.orderM.platform == 3">平台</el-tag>
                                    <el-tag size="small" effect="plain" type="danger"
                                        v-if="item.orderM.platform == 4">分公司</el-tag>
                                    <p>下单时间：{{ item.create_time }}</p>
                                    <p>订单号：{{ item.orderM.order_no }}</p>
                                    <p>包裹号：#{{ item.supply_order_no }}</p>
                                </div>
                                <div>
                                    <a v-if="item.status == 10" style="color:#e6a23c">{{
                                        item.state_text }}</a>
                                    <a v-if="item.status == 20" style="color:#67c23a">{{ item.state_text
                                        }}</a>
                                    <a v-if="item.status == 30" style="color:#909399">{{
                                        item.state_text }}</a>
                                </div>
                            </div>
                        </section>
                        <div class="table-body-item-bottom">
                            <section class="goods-wrap flex2 table-br">
                                <div :class="[item.isFlag ? 'goods-con-h' : 'goods-con']">
                                    <div class="goods-item" v-for="(goodsItem, goodsIndex) in item.orderSupplyGoods"
                                        :key="goodsIndex">
                                        <div class="goods-img">
                                            <el-image :src="goodsItem.order_goods_item.goods_image" fit="contain"
                                                class="list-img">
                                                <div slot="error" class="image-slot">
                                                    <p>暂无图片</p>
                                                </div>
                                            </el-image>
                                        </div>
                                        <div class="goods-name-wrap">
                                            <div class="goods-name">
                                                {{ goodsItem.order_goods_item.goods_name }}
                                            </div>
                                            <!-- <div class="attr">
                                                规格：{{ goodsItem.order_goods_item.sku_name }}
                                            </div> -->
                                        </div>
                                        <div class="goods-price-wrap">
                                            <p>￥{{ goodsItem.order_goods_item.goods_price }}<i
                                                    v-if="goodsItem.order_goods_item.goods_unit">/{{
                                                        goodsItem.order_goods_item.goods_unit }}</i></p>
                                            <p>x{{ goodsItem.order_goods_item.total_num }}</p>
                                        </div>
                                    </div>
                                </div>
                                <template v-if="item.orderSupplyGoods.length > 3">
                                    <div class="more-text-wrap flex-center" @click="watchMoreGoods(index)"
                                        v-if="!item.isFlag">
                                        还有{{ item.orderSupplyGoods.length - 3 }}种商品<i class="el-icon-arrow-down"></i>
                                    </div>
                                </template>
                            </section>
                            <section class="user-info flex1 table-br">
                                <p><span>地址：</span>{{ item.address.address_detail }}</p>
                                <p><span>联系人：</span>{{ item.address.name }}</p>
                                <p>电话：{{ item.address.phone }}<em class="copy"
                                        @click="copyEv(item.address.phone)">复制</em></p>
                            </section>
                            <section class="total-price flex1 table-br flex-center">￥{{ item.supply_total_price }}
                            </section>
                            <section class="total-price flex1 table-br flex-center">￥{{ item.supply_goods_service }}
                            </section>
                            <section class="flex1 table-br flex-center">
                                <el-tag type="info">线下支付</el-tag>
                            </section>
                            <section class="flex1 btn-wrap">
                                <div>
                                    <el-button type="text" @click="toDetail(item.supply_order_id, '0')">查看详情</el-button>
                                </div>
                                <div v-if="item.status == 10">
                                    <el-button type="text" @click="toDetail(item.supply_order_id, '1')">{{
                                        item.driver_id > 0 ? '修改订单' : '去发货'
                                    }}</el-button>
                                    <!-- <el-button type="text" v-if="item.driver_id > 0" @click="assignDriver(item.supply_order_id)">修改指派司机</el-button>
                                    <el-button type="text" @click="assignDriver(item.supply_order_id)" v-else>指派司机</el-button> -->
                                </div>
                                <div>
                                    <el-button type="text" @click="toSure(item.supply_order_id)"
                                        v-if="item.status == 20 && item.review_delivery != 10">确认送达</el-button>
                                </div>
                            </section>
                        </div>
                    </div>
                </template>
                <el-empty description="暂无数据" v-else></el-empty>
            </div>
            <pagination v-if="searchForm.total" :total="searchForm.total" :page.sync="searchForm.page"
                :limit.sync="searchForm.limits" @pagination="getList" />
        </el-card>
        <driver-proof ref="proof" @reload="reload"></driver-proof>
    </div>
</template>
<script>
import { orderList } from '../../api/order';
import driverProof from './components/driverProof.vue';
export default {
    components: { driverProof },
    data() {
        return {
            isLoading: false,
            searchForm: {
                page: 1,
                limits: 15,
                total: 0,
                order_no: '',
                goods_name: '',
                status: '0',
                search_type: '0',
                keyword: '',
            },
            list: [],
            options: [],
            datePickerVal: ''
        }
    },
    created() {
        this.getList()
    },
    methods: {
        handleClick(tab) {
            this.searchForm.order_status = tab.name;
            this.reload()
        },
        getList() {
            const that = this;
            that.isLoading = true;
            orderList(this.searchForm).then(res => {
                that.isLoading = false;
                if (res.code == 0) {
                    res.data.data.forEach(v => {
                        v.isFlag = false;
                    })
                    that.list = res.data.data;
                    that.searchForm.total = res.data.total;
                    // 请求完毕后重置日期参数
                    this.searchForm.time_start = ''
                    this.searchForm.time_end = ''
                }
            })
        },
        watchMoreGoods(index) {
            let list = this.list;
            list[index].isFlag = !list[index].isFlag;
            this.list = list;
        },
        reload() {
            this.searchForm.page = 1;
            this.list = [];
            this.getList();
        },
        toSearch() {
            if (this.searchForm.search_type == 1) {
                this.searchForm.goods_name = this.searchForm.keyword
                this.searchForm.order_no = ''
            } else if (this.searchForm.search_type == 2) {
                this.searchForm.order_no = this.searchForm.keyword;
                this.searchForm.goods_name = ''
            } else {
                this.searchForm.order_no = '';
                this.searchForm.goods_name = ''
            }
            // 容错
            if (this.datePickerVal) {
                this.searchForm.time_start = this.datePickerVal[0];
                this.searchForm.time_end = this.datePickerVal[1];
            }
            this.searchForm.page = 1;
            this.list = [];
            this.getList();
        },
        toDetail(id, type) {
            this.$router.push({
                path: '/order/order_detail',
                query: {
                    id,
                    type, // 按钮操作类型
                    goods_type: this.searchForm.goods_type,
                    supply_id: this.searchForm.supply_id
                },
            })
        },
        toSure(id) {
            this.$refs.proof.add()
            this.$refs.proof.ruleForm.id = id
            // this.$msgbox({
            //     title: '消息',
            //     message: "是否确认送达此订单？",
            //     showCancelButton: true,
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     beforeClose: (action, instance, done) => {
            //         if (action === 'confirm') {
            //             instance.confirmButtonLoading = true;
            //             instance.confirmButtonText = '请稍候...';
            //             confirmRecieved({
            //                 supply_order_id: id
            //             }).then(res => {
            //                 if (res.code == 0) {
            //                     instance.confirmButtonLoading = false;
            //                     instance.confirmButtonText = '确定';
            //                     this.$message.success(res.msg)
            //                     done();
            //                     this.getList()
            //                 } else {
            //                     done();
            //                 }
            //             })
            //         } else {
            //             done();
            //         }
            //     }
            // })
        },
        copyEv(mobile) {
            navigator.clipboard
                .writeText(mobile)
                .then(() => {
                    this.$message.success("复制成功");
                })
                .catch((err) => {
                    // 复制失败
                    console.error("复制失败");
                });
        },
    }
}
</script>
<style scoped>
.flex2 {
    flex: 3;
}

.flex1 {
    flex: 1;
}

.table-header {
    width: 100%;
    height: 44px;
    background: #e5eeff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
}

.table-body {
    margin-top: 20px;
}

.table-header li {
    text-align: center;
}

.table-body-item {
    width: 100%;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 12px;
}

.table-body-item:hover {
    border: 1px solid var(--main-color);
}

.table-body-item-top {
    height: 40px;
    background: rgba(229, 238, 255, 0.2);
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-weight: bold;
}

.table-order {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-order p {
    margin-left: 12px;
}

.table-body-item-bottom {
    padding: 0 12px;
    display: flex;
}

.table-br {
    border-right: 1px solid #dcdfe6;
    box-sizing: border-box;
}

.goods-item {
    height: 80px;
    padding-right: 12px;
    display: flex;
    align-items: center;
}

.goods-item .goods-img {
    flex-shrink: 0;
}

.goods-item .list-img {
    width: 60px;
    height: 60px;
}

.goods-item .goods-name-wrap {
    flex: 1;
    overflow: hidden;
    margin: 0 8px;
}

.goods-item .goods-name {
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
}

.attr {
    color: #909399;
}

.goods-item .goods-price-wrap {
    text-align: right;
}

.user-info {
    padding: 12px 12px;
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
}

.user-info p {
    /* color: #ccc; */
    /* display: flex; */
    margin-bottom: 12px;
    text-align: left;
}

.user-info p span {
    width: 80px;
    text-align: right;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.total-price {
    font-size: 16px;
}

.copy {
    color: var(--main-color);
    font-style: normal;
    padding-left: 10px;
    cursor: pointer;
}

.btn-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.goods-con {
    max-height: 240px;
    overflow: hidden;
}

.goods-con-h {
    max-height: auto;
    overflow: inherit;
}

.more-text-wrap {
    height: 40px;
    color: #afb0b2;
}

.more-text-wrap i {
    margin-left: 8px;
}
</style>